<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="close"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-row type="flex" align="top">
        <a-col :span="8">
          <img v-if="form.avatar" :src="form.avatarSrc" style="width: 160px;" />
          <img v-else src="~@/assets/ico/head.png" style="width: 160px;" />
        </a-col>
        <a-col :span="16">
          <h2>
            {{ form.realname }}
            <template v-if="form.roles&&form.roles.length>0">
              <a-tag color="green" v-for="(item, index) in form.roles" :key="index">
                {{ item.roleName }}
              </a-tag>
            </template>
          </h2>
          <p style="margin-bottom: 5px;">性别：{{ this.$filterDictTextByCache('sex', form.sex) }}</p>
          <p style="margin-bottom: 5px;">公民身份号码：{{ form.identityNumber }}</p>
          <p>联系方式：{{ form.phone }}</p>
          <a-button @click="handleVisit">
            <img src="~@/assets/ico/ico_visit.png" style="margin-right:5px;" />
            走访轨迹
          </a-button>
        </a-col>
      </a-row>
      <a-tabs>
        <a-tab-pane tab="基本信息">
          <!--//基本信息-->
          <a-descriptions :column="1">
            <a-descriptions-item label="出生日期">
              {{ form.birthday?form.birthday: '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="部门">
              {{ form.selectedDeparts?form.selectedDeparts: '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="网格编号">
              {{ form.departCode?form.departCode: '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="政治面貌">
              {{ form.politicalFace?form.politicalFace: '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="学历">
              {{ form.degree || form.degree==0?getItemsFrom(this.degreeOptions, form.degree): '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="账号">
              {{ form.username?form.username: '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="创建人">
              {{ form.createBy?form.createBy: '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">
              {{ form.createTime?form.createTime: '--' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </j-modal>
</template>

<script>
import * as structureApi from '@/api/xlgc/structure.js'
import { getFileAccessHttpUrl } from '@/api/manage'
export default {
  name: 'EditModal',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      visible: false,
      disableSubmit: false,
      form: {},
      confirmLoading: false,
      userId: null,
      degreeOptions: [
        { title: '高中', key: 1 },
        { title: '大专', key: 2 },
        { title: '本科', key: 3 },
        { title: '研究生', key: 4 },
        { title: '博士', key: 5 },
        { title: '博士后', key: 6 },
        { title: '其他', key: 0 }
      ]
    }
  },
  methods: {
    add() {
      this.visible = true
      this.$nextTick(() => {})
    },
    edit(record) {
      this.userId = record.id
      this.visible = true
      this.getUserWGY(record)
      this.$nextTick(() => {})
    },
    close() {
      this.$emit('close')
      this.visible = false
      setTimeout(() => {
        this.disableSubmit = false
        this.userId = null
        this.form = {}
      }, 500)
    },
    // 查看网格员信息
    getUserWGY(record) {
      this.confirmLoading = true
      structureApi.userWGY(this.userId).then(res => {
        this.confirmLoading = false
        if (res.success) {
          this.form = Object.assign({}, this.form, res.result)
          let departs = this.form && this.form.departs ? this.form.departs.map(v => v.departName) : []
          this.$set(this.form, 'id', this.userId)
          this.$set(this.form, 'selectedDeparts', departs.join(','))
          this.$set(this.form, 'avatarSrc', getFileAccessHttpUrl(this.form.avatar))
          this.$set(this.form, 'departCode', record.departCode)
          this.$set(this.form, 'createBy', record.createBy)
          this.$set(this.form, 'createTime', record.createTime)
        } else {
          this.$message.warn(res.message)
        }
      }).catch(e => {
        this.confirmLoading = false
        this.$message.warn('请求失败！')
      })
    },
    handleOk() {},
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t['key'] !== '' && t['key'] == key)
      if (item && item.length > 0) {
        return item[0]['title']
      }
    },
    handleVisit() {
      let path = '/visitTravel/index'; let query = { id: this.userId }
      this.$router.push({ path: path, query })
    }
  }
}
</script>
<style lang="less" scoped></style>
